import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import s from './style.module.css';
import Datetime from '@knownsec/react-component/dist/Datetime'
import moment from 'moment'
export default class RaskSelect extends React.PureComponent {
  static propTypes = {
    className: PropTypes.string,
    resultLength: PropTypes.number,
    value: PropTypes.shape({
      detectTime: PropTypes.string,
      dateRange: PropTypes.array,
      detectType: PropTypes.string
    }).isRequired,
    defaultValue: PropTypes.shape({
      detectTime: PropTypes.string,
      dateRange: PropTypes.array,
      detectType: PropTypes.string
    }),
    onChange: PropTypes.func.isRequired,
  };

  static defaultProps = {
    className: '',
  };

  state = {
    detectTime:
      this.props.value?.detectTime ||
      this.props.defaultValue?.detectTime ||
      undefined,
    dateRange:
      this.props.value?.dateRange ||
      this.props.defaultValue?.dateRange ||
      [],
    detectType: this.props.value?.detectType ||
      this.props.defaultValue?.detectType ||
      undefined
  };

  handleLastDetect = () => {
    this.setState({ detectTime: 'last', dateRange: [], detectType: 'last' }, () =>
      this.props.onChange(this.state)
    );
  };

  handlePrevDetect = () => {
    const date = [moment().subtract(7, 'days'), moment()]
    this.setState({ detectTime: 'range', dateRange: date, detectType: 'range_7' }, () =>
      this.props.onChange(this.state)
    );
  };

  handleDateChange = date => {
    if (date) {
      this.setState({ dateRange: [moment(date[0]), moment(date[1])], detectTime: 'range', detectType: 'range' }, () => {
        this.props.onChange(this.state);
      });
    } else {
      this.setState({ dateRange: [], detectTime: 'last', detectType: 'last' }, () => {
        this.props.onChange(this.state);
      });
    }
  };
  disableDate = (current) => {
    return current.diff(moment(), 'days', true) >= 0
      || current.diff(moment().subtract(180, 'days'), 'days', true) <= 0;
  }
  render() {
    const { className, resultLength } = this.props;
    const { dateRange, detectType } = this.state;
    return (
      <div className={cn(className, s.raskSelect)}>
        {resultLength === 0 ? (
          <>
            <div className={s.disableBtn}>近7次监测</div>
            <div className={s.disableBtn}>近7日监测</div>
          </>
        ) : (
          <>
            <div
              className={cn(s.speBtn, {
                [s.active]: detectType === 'last',
              })}
              onClick={this.handleLastDetect}
            >
              近7次监测
            </div>
            <div
              className={cn(s.speBtn, {
                [s.active]: detectType === 'range_7',
              })}
              onClick={this.handlePrevDetect}
            >
              近7日监测
            </div>
          </>
        )}
        <Datetime
          showTime={false}
          disabledDate={this.disableDate}
          style={{ marginLeft: '10px' }}
          ranges={{}}
          maxDay={180}
          value={dateRange}
          onChange={this.handleDateChange}
        />
      </div>
    );
  }
}
